<template>
  <el-form :model="addForm" label-width="auto" style="min-width: 600px;">
    <el-form-item class="fromBtnBox">
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <!--基础信息-->
      <el-tab-pane label="基础信息" name="first">

        <el-form-item label="名称">
          <el-input v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="编号">
          <el-select v-model="addForm.sn" placeholder="please select your zone">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="封面" prop="thumb">
          <div class="up-img-box">
            <el-image style="width: 100px; height: 100px" :src="addForm.thumb" fit="cover"
              :preview-src-list="[addForm.thumb]" />
            <div class="up-btn-box" @click="uploadImage">
              <input v-show="false" type="file" ref="fileInput" accept="image/*" @change="handleFileUpload" />
              <el-icon class="thumb-uploader-icon">
                <Plus />
              </el-icon>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="sort" label="排序">
          <el-input v-model="addForm.sort" :value="addForm.sort ? addForm.sort : '9999'" />
          <el-text class="mx-1" type="info">数字越小排序越靠前</el-text>
        </el-form-item>

        <el-form-item label="Activity time">
          <el-col :span="11">
            <el-date-picker v-model="addForm.date1" type="date" placeholder="Pick a date" style="width: 100%" />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-time-picker v-model="addForm.date2" placeholder="Pick a time" style="width: 100%" />
          </el-col>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="addForm.state" />
        </el-form-item>
        <el-form-item label="Activity type">
          <el-checkbox-group v-model="addForm.type">
            <el-checkbox value="Online activities" name="type">
              Online activities
            </el-checkbox>
            <el-checkbox value="Promotion activities" name="type">
              Promotion activities
            </el-checkbox>
            <el-checkbox value="Offline activities" name="type">
              Offline activities
            </el-checkbox>
            <el-checkbox value="Simple brand exposure" name="type">
              Simple brand exposure
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Resources">
          <el-radio-group v-model="addForm.resource">
            <el-radio value="Sponsor">Sponsor</el-radio>
            <el-radio value="Venue">Venue</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addForm.desc" type="textarea" />
        </el-form-item>
      </el-tab-pane>

      <!--相册-->
      <el-tab-pane label="相册" name="second" style="min-height: 40vh;">
        <el-form-item label="相册" prop="photos">
          <div class="up-img-box">
            <el-image style="width: 100px; height: 100px;margin-right: 10px;border-radius: 5px;"
              v-for="value in addForm.photos" :src="value" fit="cover" :preview-src-list="addForm.photos" />
            <div class="up-btn-box" @click="uploadPhotos">
              <input v-show="false" type="file" ref="fileInputPhotos" accept="image/*" multiple
                @change="handleFileUploadPhotos" />
              <el-icon class="thumb-uploader-icon">
                <Plus />
              </el-icon>
            </div>
          </div>
        </el-form-item>
      </el-tab-pane>

      <!--详情-->
      <el-tab-pane label="详情" name="third" style="min-height: 40vh;">
        <el-form-item label="详情" prop="text">
          <!-- 编辑器 自定义工具栏-->
          <!-- <quill-editor theme="snow" ref="myQuillEditor" v-model:content="addForm.text" :options="myEditorInit" content-type="html"></quill-editor> -->
          <!-- 编辑器 工具栏铺满-->
          <quill-editor theme="snow" ref="myQuillEditor" v-model:content="addForm.details" toolbar="full"
            content-type="html"></quill-editor>
          <!-- 使用自定义图片上传 -->
          <!-- <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" /> -->
        </el-form-item>
      </el-tab-pane>

      <!--规格-->
      <el-tab-pane label="规格" name="fourth" style="min-height: 40vh;">
        <!---选择单一还是多规格 默认单规格-->
        <div class="mb-2 ml-4">
          <el-form-item label="类型" prop="attrType">
            <el-radio-group v-model="addForm.attrType" @change="chooseAttrType">
              <el-radio value="1" size="large">单规格</el-radio>
              <el-radio value="2" size="large">多规格</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <!--单一属性 但规格-->
        <div class="" v-show="addForm.attrType == '1'">
          <el-form-item prop="g_inventory" label="库存">
            <el-input v-model="addForm.g_inventory" />
          </el-form-item>
          <el-form-item prop="g_original" label="原价">
            <el-input v-model="addForm.g_original" />
          </el-form-item>
          <el-form-item prop="g_price" label="售价">
            <el-input v-model="addForm.g_price" />
          </el-form-item>
        </div>
        <div class="" v-show="addForm.attrType == '2'">
          <!---多规格-->
          <attrView ref="attrViewRef"></attrView>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, getCurrentInstance } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import attrView from './attribute.vue'; //属性规格
import { QuillEditor } from '@vueup/vue-quill'; //quill 编辑器
import '@vueup/vue-quill/dist/vue-quill.snow.css';//编辑器模板样式
import { Value } from "sass";


const currentInstance = getCurrentInstance(); //获取main.js中挂载的实例
const { $api } = currentInstance.appContext.config.globalProperties;

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const fileInput = ref(null); //主图上传控件
const fileInputPhotos = ref(null); //相册上传

//表单数据
const addForm = reactive({
  name: '',
  thumb: '',//缩略图
  photos: [],//相册
  state: '',//状态
  sn: '', //编号
  sort: 9999,//排序
  desc: '', //描述
  details: '',//详情
  attrType: '1',//规格类型
  g_inventory: 1,//库存
  g_original: 1,//原价格
  g_price: 1,//售价
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
})

const onSubmit = () => {
  console.log('submit!', addForm) //表单数据
}

//主图图片上传
const uploadImage = () => {
  fileInput.value.click();
};
//input 点击事件
const handleFileUpload = (event) => {
  // console.log(event,"55");
  // file.value = event.target.files[0]; // 上传的内容
  var sizeLenght = event.target.files[0].size; //文件大小
  var size = sizeLenght / (1024 * 1024);
  // state.fileSize = size.toFixed(2); //文件大小 四舍五入保留小数后两位
  // state.fileName = event.target.files[0].name; // 文件名称
  // state.isUpLoad = true;

  // var maxlenght = 1020*1020*5; //未登录则最大5M
  // if (state.isLogin) {
  //   maxlenght = 1020*1020*20; //登录则最大20M
  // }
  // //大于100M时返回
  // if (sizeLenght > maxlenght) {
  //   // console.log("文件太大",state.fileSize/(1024*1024));
  //   msg({ type: "warn", text: "文件太大" });
  //   state.isUpLoad = false;
  //   return false;
  // }
  upFileService(event); //上传到服务器
  //   console.log(event.target.files[0]);
};

//提交到服务器
const upFileService = (event) => {
  const formdata = new FormData();
  formdata.append("file", event.target.files[0]); //转为文件流
  formdata.append("name", event.target.files[0].name); //文件名称参数
  formdata.append("folder", "article_img")
  $api.file_post("v1/login/upload/images", formdata).then((res) => {
    if (res.code == 200) {
      addForm.thumb = res.data;
    }
  });

};
//相册上传
const uploadPhotos = () => {
  fileInputPhotos.value.click(); //点击事件
}
//上传上传input 选中的图片点击事件
const handleFileUploadPhotos = (event) => {
  const files = (event.target as HTMLInputElement).files;
  console.log(files, "选中的")
  if (!files) return;
  addForm.photos = [];
  Array.from(files).forEach(file => {
    if (!file.type.startsWith('image/')) return;
    addForm.photos.push(URL.createObjectURL(file));
  });
}
// 编辑器
const myEditorInit = ref({
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],//加粗 斜体 下划线 删除线
      ['blockquote', 'code-block'],//引用
      [{ 'size': ['small', false, 'large', 'huge'] }], //字体大小
      // [{ 'size': ['12px','13px','14px','15px','18px','36px']}], //字体大小
      [{ 'font': [] }],//字体
      [{ 'align': [] }],//对齐方式
      [{ 'list': 'ordered' }, { 'list': 'bullet' }], //列表 有序 无序
      [{ 'indent': '-1' }, { 'indent': '+1' }], //缩进
      [{ 'script': 'sub' }, { 'script': 'super' }],//上标 下标
      [{ 'header': 1 }, { 'header': 2 }], //标题
      ['link', 'image', 'video'], //连接 图片 视频
      [{ 'direction': 'rtl' }], //文本方向
      [{ 'color': [] }, { 'background': [] }], //字体颜色 背景颜色
      ['clean'] //清除文本格式
    ],//工具栏
  },
  placeholder: '请输入内容...'
});

//选中规格类型（1单规格2多规格）
const chooseAttrType = (e) => {
  if (e == '1') { //单规格

  } else {
    //多规格

  }
  console.log(e)
}
</script>
<style>
.up-img-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.up-btn-box {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 1px solid #ddd;
  margin-left: 30px;
}

.ql-editor {
  max-height: 350px !important;
}

.ql-container {
  width: 100%;
}

.demo-tabs-editor {
  min-height: 600px;
}

.demo-tabs-editor .el-tabs__content {
  min-height: 520px;
}

.fromBtnBox {
  position: absolute;
  right: 10px;
  z-index: 9999;
}
</style>